import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Card, Row, Col, Image, Button, Typography } from 'antd';
import { SmileOutlined, MehOutlined, FrownOutlined } from '@ant-design/icons';
import { getUserAnswerVoByIdUsingGet } from '@/services/gucheng/userAnswerController';
import message from 'antd/es/message';
import {getAppVoByIdUsingGet} from "@/services/gucheng/appController";
const App: React.FC = () => {
  const [data, setData] = useState<API.AppVO>()
  const [loading, setLoading] = useState(false);
  const [userAnswer, setUserAnswer] = useState<any>(null);
  const params = useParams();
  const [app, setApp] = useState<API.AppVO>()
  const APP_TYPE_MAP = {
    0: '得分类',
    1: '测评类',
    // add more mappings as needed
  };
  const APP_SCORING_STRATEGY_MAP = {
    0: '自定义',
    1: 'AI',
    // add more mappings as needed
  };
  const loadData = async () => {
    setLoading(true);
    try {
      const res = await getUserAnswerVoByIdUsingGet({ id: params.id });
      setUserAnswer(res.data);
      setLoading(false);
      setData(res.data);
    } catch (error) {
      message.error('Failed to fetch data: ' + error.message);
    }
  };
  const loadData2 = async () => {
    if (!params.id) {
      message.error('参数不存在');
      return;
    }
    setLoading(true);
    try {
      const res2 = await getAppVoByIdUsingGet({
        id: Number(params.id),
      });
      setApp(res2.data);
    } catch (error: any) {
      message.error('请求失败' + error.message);
    }
    setLoading(false);
  };
  useEffect(() => {
    loadData2().then()
    loadData().then();
  }, []);
  const customIcons = {
    1: <FrownOutlined />,
    2: <FrownOutlined />,
    3: <MehOutlined />,
    4: <SmileOutlined />,
    5: <SmileOutlined />,
  };
  return (
    <Card loading={loading}>

      <Row gutter={16}>
        <Col span={12}>
          <Image
            src={require('../../Assets/43ce6e951e284201b43e00ae361d05c0.png')}
            alt="Result Image"
            preview={false}
            style={{ width: '100%' }}
          />
        </Col>
        <Col span={12}>
          <Typography.Title level={2}>{userAnswer?.resultName}</Typography.Title>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div><Typography.Text>评价结果: {userAnswer?.resultDesc}</Typography.Text></div>
            <div><Typography.Text>我的答案: {userAnswer?.choices}</Typography.Text></div>
            <div><Typography.Text>应用 id: {userAnswer?.appId}</Typography.Text></div>
            <div><Typography.Text>应用类型: {APP_TYPE_MAP[userAnswer?.appType]}</Typography.Text></div>
            <div><Typography.Text>评分策略: {APP_SCORING_STRATEGY_MAP[userAnswer?.scoringStrategy]}</Typography.Text></div>
            <div><Typography.Text>答题时间: {userAnswer?.createTime}</Typography.Text></div>
          </div>
          <Row justify="center" gutter={16} style={{marginTop: '20px'}}>
            <Col>
              <Button type="primary" href={'/'}>回到主页</Button>
            </Col>
            <Col>
              <Button type="primary" href={`/index/detail/${userAnswer?.appId}`}>再测一次</Button>
            </Col>
          </Row>
        </Col>
      </Row>
    </Card>
  );
};
export default App;
